<template>
  <video
    :id="videoName"
    :ref="videoName"
    autoplay
    autobuffer
    muted
    preload="auto"
    allowfullscreen="true"
    controls
  />
  <!--  controls -->
</template>

<script>
import adapter from 'webrtc-adapter'
import WebRtcStreamer from './webrtcstreamer'
export default {
  name: 'WebRtcStreamer',
  props: {
    // location.protocol+"//"+window.location.hostname+":"+window.location.port
    serveUrl: {
      type: String,
      default: process.env.VUE_APP_WEBRTC_SERVER_URL ||
      location.protocol + '//' + window.location.hostname + ':' + process.env.VUE_APP_WEBRTC_SERVER_PORT
    },
    rtspUrl: {
      type: String,
      default: ''
    },
    // index 多个组件必填 否则会只显示一个视频
    index: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      webRtcServer: null,
      videoName: ''
    }
  },
  created() {
    this.videoName = 'video' + this.index
    // window.onbeforeunload = this.destroyedWebRtc
    window.addEventListener('beforeunload', this.destroyedWebRtc)
  },
  mounted() {
    // this.init()
  },
  destroyed() {
    if (this.webRtcServer) {
      this.webRtcServer.disconnect()
    }
  },
  methods: {
    destroyedWebRtc() {
      if (this.webRtcServer) {
        this.webRtcServer.disconnect()
      }
    },
    init(url) {
    //   let webrtcUrl = ''
    //   if (process.env.VUE_APP_WEBRTC_SERVER_URL) {
    //     webrtcUrl = process.env.VUE_APP_WEBRTC_SERVER_URL
    //   } else if (process.env.VUE_APP_WEBRTC_SERVER_PORT) {
    //     webrtcUrl = location.protocol + '//' + window.location.hostname + ':' + process.env.VUE_APP_WEBRTC_SERVER_PORT
    //   }

      const serveUrl = this.serveUrl // || webrtcUrl
      if (this.webRtcServer) { this.webRtcServer.disconnect() }
      this.webRtcServer = new WebRtcStreamer(this.videoName, serveUrl)
      this.webRtcServer.connect(url || this.rtspUrl)
    },
    // connect(){

    // },
    initByCarmeraId(id) {
      // var url = 'rtsp://' + params.username + ':' + params.password + '@' + params.ip + '/Streaming/Channels/1'
    }
  }
}
</script>

<style>

</style>
